/*
  1) 这个文件的主要作用是什么?
  - 权限控制 (整个项目的 页面访问拦截 和 权限 都是在这个文件中写的)
  - 一般像后台管理系统项目, 都是需要做权限控制的
    - 如果用户没有token, 统一拦截去登录
    - 如果用户访问一些不需要拦截的页面, 直接放行

  2) 页面访问拦截的具体步骤
  - 配置一个白名单数组
    const whiteList = ['/login', '/404']
  - 在路由的全局前置守卫中
    - 获取token
    - 判断
      - 如果有token
        - 访问的是登录页, 或者404页面, 引导去首页
        - 访问其它页面, 直接放行
      - 如果没有token
        - 访问的是登录页, 或者404页面,直接放行
        - 访问是其它页面, 拦截去登录页面
*/

import router from '@/router'
import store from '@/store'
import NProgress from 'nprogress' // 引入进度条工具库
import 'nprogress/nprogress.css'

// 白名单
const whiteList = ['/login', '/404']

/**
 * 路由的全局前置守卫
 */
router.beforeEach(async(to, from, next) => {
  // 0. 开启进度条
  NProgress.start()
  // 1. 判断是否有token
  if (store.getters.token) { // 有
    // 1.1 判断是否去登录页
    if (to.path === '/login') {
      next('/') // 拦截去主页面
      // 手动强制关闭一次
      NProgress.done()
    } else {
      // 如果没有用户信息则获取
      // JSON.stringify(store.user.state.userInfo) === '{}'
      if (!store.getters.userId) {
        // 1.3 派发异步任务
        const { roles } = await store.dispatch('user/getUserInfo')
        // 1.4 根据用户信息中的菜单获取动态路由数组
        const routes = await store.dispatch('permission/filterRoutes', roles.menus)
        // console.log(routes)
        // 1.5 把动态路由添加到路由表中
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // addRoutes是一个异步函数
        // 1.6 重新再进入一次
        next(to.path)
      } else {
        next() // 直接放行
      }
    }
  } else { // 没有
    // 1.2 判断是否在白名单
    if (whiteList.includes(to.path)) { // 在
      next()
    } else { // 不在
      next('/login')
      // 手动强制关闭一次
      NProgress.done()
    }
  }
})

/**
 * 路由的全局后置守卫
 */
router.afterEach(() => {
  // 关闭进度条
  NProgress.done()
})
